<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            color: #212529;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: auto;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1, h2 {
            color: #343a40;
            text-align: center;
        }
        .summary {
            text-align: center;
            font-size: 1.2em;
            margin-bottom: 30px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
        }
        .chart-container {
            margin-bottom: 40px;
        }
        canvas {
            width: 100% !important;
            height: auto !important;
        }
         footer {
            text-align: center;
            margin-top: 30px;
            font-size: 0.9em;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI智能体表现数据集分析看板</h1>
        <div class="summary">
            <p>已处理数据集总记录数: <strong>5000</strong></p>
        </div>

        <div class="chart-container">
            <h2>问题一：不同智能体类型中，支持多模态处理的占比</h2>
            <p style="text-align: center;">从大到小排名前三的智能体类型</p>
            <canvas id="agentTypeChart"></canvas>
        </div>

        <div class="chart-container">
            <h2>问题二：不同大模型架构中，支持多模态处理的占比</h2>
            <p style="text-align: center;">从大到小排名前三的大模型架构</p>
            <canvas id="modelArchChart"></canvas>
        </div>

        <div class="chart-container">
            <h2>问题三：不同任务类型下，智能体表现的公正性（中位数）</h2>
             <p style="text-align: center;">从高到低排名前三的任务类型</p>
            <canvas id="biasDetectionChart"></canvas>
        </div>
         <footer>
            <p>该看板由AI生成，数据源于 Kaggle 数据集 "Agentic AI Performance Dataset 2025"。</p>
        </footer>
    </div>

    <script>
        const formatPercent = (value) => (value * 100).toFixed(2) + '%';

        // Data for Chart 1: Top 3 Agent Types by Multimodal Capability Ratio
        const agentTypeData = {
            labels: ['Customer Service', 'Content Creator', 'Social Media Manager'],
            datasets: [{
                label: '支持多模态处理的占比',
                data: [0.170588, 0.168831, 0.165079],
                backgroundColor: 'rgba(75, 192, 192, 0.6)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };

        // Data for Chart 2: Top 3 Model Architectures by Multimodal Capability Ratio
        const modelArchData = {
            labels: ['Mixtral-8x7B', 'Falcon-180B', 'CodeT5+'],
            datasets: [{
                label: '支持多模态处理的占比',
                data: [0.183267, 0.158513, 0.154176],
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        };

        // Data for Chart 3: Top 3 Task Categories by Median Bias Detection Score
        const biasDetectionData = {
            labels: ['Creative Writing', 'Problem Solving', 'Learning & Adaptation'],
            datasets: [{
                label: '公正性中位数',
                data: [0.7820, 0.7806, 0.77795],
                backgroundColor: 'rgba(255, 159, 64, 0.6)',
                borderColor: 'rgba(255, 159, 64, 1)',
                borderWidth: 1
            }]
        };
        
        const chartOptions = (isPercentage = false) => ({
            indexAxis: 'y',
            scales: {
                x: {
                    beginAtZero: true,
                    ticks: {
                        callback: isPercentage ? function(value) { return formatPercent(value); } : undefined
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            let value = context.raw;
                            if (isPercentage) {
                                label += formatPercent(value);
                            } else {
                                label += value.toFixed(4);
                            }
                            return label;
                        }
                    }
                }
            }
        });

        // Create charts
        new Chart(document.getElementById('agentTypeChart'), { type: 'bar', data: agentTypeData, options: chartOptions(true) });
        new Chart(document.getElementById('modelArchChart'), { type: 'bar', data: modelArchData, options: chartOptions(true) });
        new Chart(document.getElementById('biasDetectionChart'), { type: 'bar', data: biasDetectionData, options: chartOptions(false) });
    </script>
</body>
</html> 